<template>
    <view class="goods-item">
      <view class="goods-item-left">
        <image :src="goods.goods_small_logo || defaultPic" class="goods-pic" mode="widthFix"></image>
      </view>
      <view class="goods-item-right">
        <view class="goods-name">
          {{goods.goods_name}}
        </view>
        <view class="goods-info-box">
          <view class="goods-price">
            <!-- ￥{{goods.goods_price | twoFixedGoodsPrice}} -->
            ￥{{computedGoodsPrice}}
          </view>
        </view>
      </view>
    </view>
</template>

<script>
	export default {
    props:{
      goods:{
        type: Object,
        default: {}
      }
    },
		data() {
			return {
        defaultPic: 'https://img1.baidu.com/it/u=1868991248,4278331629&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=760',
			};
		},
/*    filters:{
      twoFixedGoodsPrice(num){
        return Number(num).toFixed(2)
      }
    } */
    computed:{
      computedGoodsPrice(){
        return Number(this.goods.goods_price).toFixed(2)
      }
    }
	}
</script>

<style lang="scss">
    .goods-item{
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;
      margin: 10px 0;
      .goods-item-left{
        width: 33.33%;
        .goods-pic{
          width: 120px;
          height: 120px;
          display: block;
        }
      }
      .goods-item-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 13px;
        .goods-name{
          font-size: 13px;
        }
        .goods-info-box{
          .goods-price{
            color: #c00000;
            font-size: 16px;
          }
        }
      }
    }
</style>
